<template>
    <div>
         <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/index/mine/leave' }">我的请假信息</el-breadcrumb-item>
        </el-breadcrumb>

         <el-row class="margintop20">
            <el-col>
                  <el-table
                :data="list"
                style="width:100%"
                class="tableinfo margin20"
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}"
                >
                <el-table-column label="#" type="index"></el-table-column>
                <el-table-column label="姓名" prop="username"></el-table-column>
                <el-table-column label="手机号" prop="mobile"></el-table-column>
                <el-table-column label="内容" prop="desc" width="250" style="white-space:nowrap;overflow:hidden">
                    <template slot-scope="scope">
                        <el-popover
                        placement="top-start"
                        title="请假原因"
                        width="250"
                        trigger="hover"
                        >
                            <div v-html="scope.row.desc" ></div>
                            <span slot="reference" v-html="scope.row.desc.substr(0,20)+(scope.row.desc.length>20 ? '...' : '')"></span>
                        </el-popover>
                    </template>
                     </el-table-column>
                <el-table-column label="请假时间">
                    <template slot-scope="scope">
                        <span>{{scope.row.time1 | timeFormat('MM/DD')}} —  {{scope.row.time2 | timeFormat('MM/DD')}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="请假类型" prop="category">
                    <template slot-scope="scope">
                        <el-tag v-for="(k,i) in scope.row.category" :key="i" size="mini" :type="colors[i]">
                            {{k}}
                        </el-tag>
                    </template>
                </el-table-column>
                    <el-table-column label="审核">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.flag == 1" type="success">通过</el-tag>
                            <el-tag v-else-if="scope.row.flag == 2" type="danger">未通过</el-tag>
                            <el-tag v-else>审核中...</el-tag>
                        </template>
                    </el-table-column>
            </el-table>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {find,approval} from "@/api"
const colors = ["success","primary","danger","info","warning"]
export default {
    data(){
        return {
            list:[],
            colors
        }
    },
    mounted(){
        find()
        .then(res=>{
            console.log(res)
            this.list = res.result
        })
    },
    methods:{
        yes(row){
            var flag = "1" 
            approval({
                flag,
                id:row._id
            })
            .then(res=>{
                if(res.type){
                    this.list = this.list.filter(item=>item._id !== row._id)
                }
            })
        },
        no(row){
            var flag = "2" 
            approval({
                flag,
                id:row._id
            })
            .then(res=>{
                if(res.type){
                    this.list = this.list.filter(item=>item._id !== row._id)
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    span{
        margin-right: 5px !important;
    }
</style>